<template>
  <div class="pageHead">
    <router-link to="/" class="logo"><img :src="siteLogo"/></router-link>
    <div class="menu currentPair" @mouseover="isShowPairList = true" @mouseoout="isShowPairList = false">
      <div class="caption symbol"><span class="text">{{pair.coinCode}} / {{pair.currencyCode}}</span><i class="arrow"></i></div>

      <div class="panel pairsBox" v-show="isShowPairList">
        <div class="tabTitle">
          <span
            v-for="(cate, index) in coinList"
            v-text="cate.CoinCode"
            :class="{item: true, active: currentCoinCode === cate.CoinCode}"
            @click="clickCoin(cate.CoinCode)"
          ></span>
        </div>

        <div class="pairCaption">
          <span class="item" :style="{width: pairCaptionWidths.market}">{{lang['tradingPage head pair']}}</span>
          <span class="item" :style="{width: pairCaptionWidths.price}">{{lang['price']}}</span>
          <span class="item" :style="{width: pairCaptionWidths.rose}">{{lang['24h Change']}}</span>
        </div>

        <ul class="pairList">
          <li
            v-for="item in pairsList"
            :class="{active:  pair.coinCode === currentCoinCode &&　pair.currencyCode === item.CurrencyCode}"
            @click="switchPair(item)">
            <!--下面是一样的-->
            <span class="market" :style="{width: pairCaptionWidths.market}" v-text="item.CurrencyCode"></span>
            <span class="price" :style="{width: pairCaptionWidths.price}">{{item.Price | currency('USD', '', precisionList(item)) | fillDecimal(precisionList(item))}}</span>
            <span class="rose" :class="{up: item.Rose >= 0, down: item.Rose < 0}" :style="{width: pairCaptionWidths.rose}">
              <font v-html="item.Rose >= 0 ? '+' : ''" ></font>{{(item.Rose * 100) || 0 | currency('USD', '', 2) | fillDecimal(2)}}%
            </span>
          </li>
        </ul>
        <!--end-->

      </div>
    </div>

    <div class="currentPairInfo">
      <p>
        <span>{{lang['new price']}}</span>
        <span :class="{up: pairInfo.Rose >= 0, down: pairInfo.Rose < 0}">
          <i v-show="pairInfo.Rose"></i>
          {{pairInfo.CurrentPrice | currency('USD', '', pair.cyPrec) | fillDecimal(pair.cyPrec)}}
        </span>
      </p>
      <p>
        <span>{{lang['24h Change']}}</span>
        <span :class="{up: pairInfo.Rose >= 0, down: pairInfo.Rose < 0}">
          <font v-html="pairInfo.Rose >= 0 ? '+' : ''"></font>{{(pairInfo.Rose * 100) || 0 | currency('USD', '', 2) | fillDecimal(2)}}%
        </span>
      </p>
      <p>
        <span>{{lang['highest price']}}</span>
        <span class="up">{{pairInfo.HighestPrice | currency('USD', '', pair.cyPrec) | fillDecimal(pair.cyPrec)}}</span>
      </p>
      <p>
        <span>{{lang['lowest price']}}</span>
        <span class="down">{{pairInfo.LowestPrice | currency('USD', '', pair.cyPrec) | fillDecimal(pair.cyPrec)}}</span>
      </p>

    </div>

    <div class="menuCenter" v-show="ClientWidth >= 1200">
      <ul>
        <li class="active"><router-link to="/fiat/index" class="ctc">{{lang['headerNavLCTransact']}}</router-link></li>
        <li><router-link to="/trading">{{lang['headerNavTransact']}}</router-link></li>
      </ul>
    </div>

    <div class="right">
      <Assets :lang="lang" :userInfo="mixUserInfo" v-on:hideSubmenu="isShowSubMenu = false"></Assets>

      <div class="menu userMenu" v-if="!mixUserInfo.userName" v-show="ClientWidth >= 1200">
        <div class="caption noLogin">
          <router-link :to="{path: '/user/login', query: {from: $route.name}}">{{lang.headerLogin}}</router-link>
          <i class="line"></i>
          <router-link :to="{path: '/user/register', query: {from: $route.name}}" class="a2">{{lang.headerRegistration}}</router-link>
        </div>
      </div>

      <div class="menu userMenu" v-if="mixUserInfo.userName"  v-show="ClientWidth >= 1200">
        <div class="caption">
          <i class="icon"></i>
          <span class="text">{{mixUserInfo.userName}}</span>
          <i class="arrow"></i>
        </div>
        <div class="panel" :style="{width: faWidth}">
          <router-link to="/safety" class="safe">{{lang.headerAccountSecurity}}</router-link>
          <a class="exit" @click="handleLogout">{{lang.headerExct}}</a>
        </div>
      </div>

      <div class="langMenu" v-show="ClientWidth >= 1200" @mouseover="isShowLangList = true" @mouseout="isShowLangList = false">
        <p class="selectedLanguage">
          <img class="contryContent" :src="currentLanguage.pic">
          <span>{{currentLanguage.name}}</span>
          <i :class="{active: isShowLangList}"></i>
        </p>
        <ul v-show="isShowLangList" class="languageList">
          <li v-for="(item, key, index) in languageList" @click="switchLanguage(key)" v-if="langSting && langSting.indexOf(key) > -1" :key="index"><img :src="item.pic">{{item.name}}</li>
        </ul>
      </div>
      <div class="submenuOnOff"  @click.stop="isShowSubMenu = !isShowSubMenu" :class="isShowSubMenu?'chacha':''" v-show="ClientWidth<1200">
        <!-- 右角子菜单开关 -->
      </div>


    </div>
      <!-- 800 resp 子菜单-->
    <div class="submenu" v-show="isShowSubMenu && ClientWidth < 1200" >
        <router-link to="/fiat/index" class="linkitem first">{{lang['headerNavLCTransact']}}</router-link>
        <router-link to="/trading"  class="linkitem">{{lang['headerNavTransact']}}</router-link>

        <div class="langMenu" @mouseover="isShowLangList = true" @mouseout="isShowLangList = false">
          <p class="selectedLanguage">
            <img class="contryContent" :src="currentLanguage.pic">
            <span>{{currentLanguage.name}}</span>
            <i :class="{active: isShowLangList}"></i>
          </p>
          <ul v-show="isShowLangList" class="languageList">
            <li v-for="(item, key, index) in languageList" @click="switchLanguage(key)" v-if="langSting && langSting.indexOf(key) > -1" :key="index"><img :src="item.pic">{{item.name}}</li>
          </ul>
        </div>
        
         <div class="nolog">
            <a class="text" @click="ShowUsrInfo= !ShowUsrInfo"  v-if="mixUserInfo.userName"> {{mixUserInfo.userName}} <img src="../../../assets/images/arrow-down.png"></a>
            <div id="menuTwo" v-show='ShowUsrInfo' @mouseleave="ShowUsrInfo=false">
              <router-link to="/safety" class="a1">{{lang.headerAccountSecurity}}</router-link>
              <!-- <router-link to="/assets" class="a2">{{lang.headerAssets}}</router-link> -->
              <a class="a3" @click="handleLogout">{{lang.headerExct}}</a>
            </div>
        </div>
        <div class="login">
            <router-link :to="{path: '/user/login', query: {from: $route.name}}" v-if="!mixUserInfo.userName">{{lang.headerLogin}}</router-link>
            <router-link :to="{path: '/user/register', query: {from: $route.name}}" v-if="!mixUserInfo.userName">{{lang.headerRegistration}}</router-link>
        </div>

    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import Assets from './../../trading/components/Assets.vue'
import LoginService from '@/service/LoginService.js'
import $ from 'jquery'
import _ from '@/libs/lodash.min.js'
export default {
  components: {
    Assets
  },
  data () {
    return {
      currentCoinCode: '',
      pairsList: {},
      currentPair: {},
      currentPairCateIndex: 0,
      isShowLangList: false,

      pairCaptionWidths: {
        market: '140px',
        price: '100px',
        rose: '90px',
      },
      isShowPairList: false,
      languageList: {
        'en': {
          name: 'English',
          pic: require('../../../assets/images/language/english.png')
        },
        'zh-CN': {
          name: '中文简体',  // this.lang.headerLanguangChinas
          pic: require('../../../assets/images/language/chinese.png')
        },
        'zh-Hant': {
          name: '中文繁体',  // this.lang.headerLanguangChinas
          pic: require('../../../assets/images/language/chinese.png')
        },
        'ja': {
          name: '日本語',
          pic: require('../../../assets/images/language/japanese.png')
        },
        'ko': {
          name: '한국어',
          pic: require('../../../assets/images/language/korean.png')
        },
        'fr': {
          name: 'Français',
          pic: require('../../../assets/images/language/french.png')
        },
        'nl': {
          name: 'Nederlands',
          pic: require('../../../assets/images/language/nederlands.png')
        },
        'vi': {
          name: 'Tiếng Việt',
          pic: require('../../../assets/images/language/vietnamese.png')
        }
      },
      currentLanguage: {},
      faWidth: 'auto',

      //新增屏幕宽度属性
      ClientWidth:`${window.innerWidth}`,
      isShowSubMenu:false,
      ShowUsrInfo:false
    }
  },
  props: [
    'lang',
    'pairInfo',
    'pair',
    'coinList'
  ],
  watch: {
    langKey () {
      this.currentLanguage = this.languageList[this.langKey]
    },
    pair: {
      handler () {
        this.currentCoinCode = this.pair.coinCode
        this.clickCoin(this.pair.coinCode)
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters({
      langKey: 'langKey',
      mixUserInfo: 'userInfo',
      customInfo: 'customInfo'
    }),
    langSting: function () {
      return this.customInfo.Languages
    },
    siteLogo: function () {
      return this.customInfo.Logo1 ? this.customInfo.Logo1 : require('../../../assets/images/logo.png')
    }
  },
  created () {
    this.currentLanguage = this.languageList[this.langKey]
  },
  methods: {
    ...mapActions([ 'switchLang', 'logout' ]),
    precisionList (item) {
      for (let i = 0; i < this.coinList.length; i++) {
        if (this.currentCoinCode === this.coinList[i].CoinCode) {
          for (let j = 0; j < this.coinList[i].CurrencyList.length; j++) {
            if (item.CurrencyCode === this.coinList[i].CurrencyList[j].CurrencyCode) {
              return this.coinList[i].CurrencyList[j].Precision
            }
          }
        }
      }
    },
    clickCoin (CoinCode) {
      this.currentCoinCode = CoinCode
      this.$host2.get('Order/GetMarketPriceList', {
        coinCode: CoinCode
      }, {
        isQueryString: true
      }).then((res) => {
        if (res.StatusCode === '200') {
          this.pairsList = res.Data || {}
        }
      })
    },
    switchPair (item) {
      let coinCodeList = {}
      let currencyCodeList = {}
      for (let i = 0; i < this.coinList.length; i++) {
        if (this.currentCoinCode === this.coinList[i].CoinCode) {
          coinCodeList = this.coinList[i]
          for (let j = 0; j < this.coinList[i].CurrencyList.length; j++) {
            if (item.CurrencyCode === this.coinList[i].CurrencyList[j].CurrencyCode) {
              currencyCodeList = this.coinList[i].CurrencyList[j]
            }
          }
        }
      }
      this.$emit('switchCurrency', coinCodeList.CoinCode, currencyCodeList.CurrencyCode, coinCodeList.Precision, currencyCodeList.Precision)
      this.isShowPairList = false
    },
    switchLanguage (language, dflang) {
      this.currentLanguage = this.languageList[language]
      // 更改语言
      this.switchLang(language)
      this.isShowLangList = false
    },
    handleLogout () {
      LoginService.logout()
      this.$router.push({path: '/user/login'})
    }
  },
  mounted () {
    this.faWidth = $('.userMenu').width() + 'px'

      //获取页面可视宽度，以1200为界,_.debounce为lodash去抖
    const _this=this;

    window.onresize=_.debounce(function(){
         _this.ClientWidth=`${window.innerWidth}`
         //console.log(_this.clientWidth)
    },500);
  }
}
</script>

<style lang="less">
@import './../css/head.less';
</style>
<style lang="less" scopped>
@imgPath:"../../../assets/images/";
.ctcPage{
  .pageHead{
      min-width:760px;
     .right{
       .submenuOnOff{
         float:right;
         cursor: pointer;
          width:3.2rem;
          height:100%;
          background:url("@{imgPath}icon_list.png") no-repeat 50% 50%;
       }
       .chacha{
         background: url("@{imgPath}page/asset_03.png") no-repeat 50% 50%;
       }
     }
      .submenu{
        position: absolute;
        width:105%;
        margin-left:-5%;
        height:3.15rem;
        background-color:#191f2b;
        border-top:1px solid #323440;
        margin-top:3.15rem;
        z-index:9999;
        .linkitem{
            display:inline-block;
            height:100%;
            max-width:20%;
            color:#fff;
            margin:1.2rem auto 1rem 2rem ;
            text-align:right;
        }
        .first{
              margin-left:12%;
        }
        .login,.nolog{
          float:right;
          margin:1.2rem 0.625rem auto auto;
          a{
            display: inline-block;
            color:#fff;
            margin-right:1.625rem;
          }
          .text{
            background: url("@{imgPath}user-default-head.png") no-repeat left -25%;
            padding-left:2rem;
            height:1.2rem;
         }
        }
      .langMenu { margin-top: 15px;}

      }
    #menuTwo{
      position: fixed;
      z-index:10003;
      width:5.2rem;
      height:5.5rem;
      top:6.5rem;
      right:9rem;
      background:#15192b;
      border-radius: 5px;
      padding:0 1.25rem;
        ::after{
        position: absolute;
        top: -10px;
        right: 1.2rem;
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-bottom: solid 10px rgba(0,0,0,0.55);
        border-left: solid 8px Transparent;
        border-right: solid 8px Transparent;
      }
      a{
        float:left;
        clear:both;
        width:70%;
        font-size:0.625rem;
        height:1.2rem;
        line-height:1.5rem;
        margin-top:1rem;
        padding:0;
        text-align:left;
      }
      .text-overflow{
          display: block;
        padding-left:1.5rem;
        text-overflow:ellipsis;
        white-space:nowrap;
        overflow:hidden;
      }
        .a1 {
          .text-overflow;
          background: url("@{imgPath}head_safe2.png") no-repeat left center;
          &:hover,&:active{
            background: url("@{imgPath}head_safe.png") no-repeat left center;
            color:#3575df;
          }
        }
        .a3 {
          .text-overflow;
          background: url("@{imgPath}head_exit2.png") no-repeat left center;
            &:hover,&:active{
            background: url("@{imgPath}head_exit.png") no-repeat left center;
              color:#3575df;
          }
        }

    }
   }
}

</style>
